Vue no es compatible con IE8 y versiones anteriores, ya que utiliza las características de ECMAScript 5 que son incompatibles en IE8. Sin embargo, admite todos los navegadores compatibles con ECMAScript 5.
Notas de lanzamientoÚltima versión estable: 2.5.16
Las notas de lanzamiento detalladas para cada versión están disponibles en GitHub.
Vue DevtoolsCuando use Vue, le recomendamos que también instale Vue Devtools en su navegador, lo que le permite inspeccionar y depurar sus aplicaciones de Vue de una manera más amigable.
Inclusión Directa conSimplemente descargue e incluya la etiqueta script con la ruta correcta. Vue será registrado como una variable global.
No utilice la versión minificada (de producción) durante el desarrollo. Usted perderá todas las advertencias interesantes para los errores más comunes!
Versión de DesarrolloMensajes de error completos y modo de depuraciónVersión de ProducciónSin mensajes de error, 30.90KB min+gzip
CDNEs recomendable vincular a un número específico de versión que pueda actualizar manualmente:
Puede examinar el código fuente del paquete NPM en cdn.jsdelivr.net/npm/vue.
Vue también está disponible en unpkg y cdnjs (cdnjs tarda un poco en sincronizarse, por lo que es posible que la última versión aún no esté disponible).
Asegúrese de leer acerca de las diferentes compilaciones de Vue y use la versión de producción en su sitio publicado, reemplazando vue.js con vue.min.js. Esta es una versión más pequeña optimizada para la velocidad en lugar de la experiencia de desarrollo.
NPMNPM es el método de instalación recomendado para construir aplicaciones a gran escala con Vue. Este combina perfectamente con empaquetadores de módulos, tales como Webpack o Browserify. Vue también ofrece herramientas para la creación de componentes de un solo archivo (en inglés Single-File Components).
# latest stable$ npm install vueCLIVue proporciona un CLI oficial para rapidamente construir ambiciosas Single Page Applications. Proporciona configuraciones de build prontas para un proceso de trabajo de front-end moderno. Sólo tarda unos minutos para estar listo y ejecutándose con hot-reload, lint al guardar cambios y empaquetado listo para la distribución en producción. Consulte los documentos de Vue CLI para obtener más detalles.
Este tema presupone conocimiento previo en Node.js y herramientas de build asociadas. Si usted es nuevo en Vue o en este tipo de herramienta, le recomendamos encarecidamente que pase por toda la guía antes de intentar utilizar el CLI.
Explicación de las Diferentes CompilacionesEn el directorio dist/ del paquete NPM usted encontrará muchas compilaciones o distribuciones diferentes de Vue.js. Una descripción de la diferencia entre ellas:
UMDCommonJSES ModuleCompletavue.jsvue.common.jsvue.esm.jsRuntimevue.runtime.jsvue.runtime.common.jsvue.runtime.esm.jsCompleta (producción)vue.min.js--Runtime (producción)vue.runtime.min.js--TérminosCompleta: compilaciones que contienen tanto el compilador como el motor de tiempo de ejecución (en inglés, runtime).
Compilador: código que es responsable de compilar template strings en las funciones de render de JavaScript.
Runtime: código que es responsable de crear instancias de Vue, renderizado y actualización del DOM virtual, etc. Básicamente todo menos el compilador.
UMD: las compilaciones UMD se pueden utilizar directamente en el navegador a través de un tag . El archivo predeterminado de jsDelivr CDN en https://cdn.jsdelivr.net/npm/vue es la distribución Compilador + Runtime en formato UMD (vue.js).
CommonJS: formato destinado a empaquetadores antiguos como browserify or webpack 1. El archivo predeterminado para estos empaquetadores (pkg.main) es la distribución Runtime en formato CommonJS (vue.runtime.common.js).
ES Module: formato de módulos ECMAScript destinado a empaquetadores modernos como webpack 2 o rollup. El archivo predeterminado para estos empaquetadores (pkg.module) es la distribución Runtime en formato ES Module (vue.runtime.esm.js).
Runtime + Compilador vs. RuntimeSi necesita compilar templates en tiempo real en el cliente (por ejemplo: pasando un String en la opción template, o usando elementos preexistentes en el DOM a través del HTML como template), necesitará el compilador y por lo tanto la distribución completa:
// esto requiere el compiladornew Vue({ template: '{{ hi }}'})// esto nonew Vue({ render (h) {return h('div', this.hi) }})Cuando se usa vue-loader o vueify, los templates dentro de los archivos *.vue se compilan previamente en JavaScript en el momento de la compilación. Realmente no necesita el compilador en el paquete final y, por lo tanto, puede usar la distribución Runtime.
Dado que las distribuciones solo con el código de Runtime son aproximadamente un 30% más ligeras que las distribuciones completas, debe usarlas siempre que pueda. Si aún desea utilizar la distribución completa, debe configurar un alias en su empaquetador:
Webpackmodule.exports = { // ... resolve: {alias: { 'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' para webpack 1} }}Rollupconst alias = require('rollup-plugin-alias')rollup({ // ... plugins: [alias({ 'vue': 'vue/dist/vue.esm.js'}) ]})BrowserifyAgregue a su proyecto package.json:
{ // ... "browser": {"vue": "vue/dist/vue.common.js" }}ParcelAgregue a su proyecto package.json:
{ // ... "alias": {"vue" : "./node_modules/vue/dist/vue.common.js" }}Desarrollo vs. ProducciónLos modos de desarrollo/producción están codificados para las compilaciones de UMD: los archivos no minimizados son para desarrollo y los archivos minificados para producción.
Las distribuciones de módulos de CommonJS y ES están destinadas a empaquetadores, por lo tanto, no proporcionamos versiones mínimas para ellos. Usted será responsable de minimizar el paquete final usted mismo.
Estas distribuciones también preservan chequeos a la variable process.env.NODE_ENV para determinar el modo en que deben ejecutarse. Debe configurar apropiadamente su empaquetador para cambiar estas variables de entorno correctamente para controlar el modo en que Vue se ejecutará. Cambiar process.env.NODE_ENV usando Strings literales también permite que minificadores como UglifyJS eliminen completamente los bloques de código de desarrollo, reduciendo el tamaño del archivo final.
WebpackEn Webpack 4+, puede usar la opción mode:
module.exports = { mode: 'production'}Pero en Webpack 3 y anteriores, es necesario usar DefinePlugin:
var webpack = require('webpack')module.exports = { // ... plugins: [// ...new webpack.DefinePlugin({ 'process.env': {NODE_ENV: JSON.stringify('production') }}) ]}RollupUtilice el rollup-plugin-replace:
const replace = require('rollup-plugin-replace')rollup({ // ... plugins: [replace({ 'process.env.NODE_ENV': JSON.stringify('production')}) ]}).then(...)BrowserifyAplique una transformación envify global en su paquete.
NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.jsVea también Consejos de Publicación para Producción.
Ambientes CSPAlgunos entornos, como Google Chrome Apps, aplican la Política de seguridad de contenido (CSP), que prohíbe el uso de new Function() para evaluar expresiones. La distribución completa depende de esta característica para compilar templates, por lo que no se puede utilizar en estos entornos.
Por otro lado, la distribución Runtime es totalmente compatible con CSP. Cuando se utiliza la distribución Runtime con Webpack + vue-loader o Browserify + vueify, sus templates serán precompilados en funciones render que funcionan perfectamente en entornos CSP.
Compilación de DesarrolloImportante: los archivos compilados en la carpeta /dist de GitHub solo se crean durante los lanzamientos de nuevas versiones. Para usar Vue desde el último código fuente de GitHub, ¡tendrás que crearlo tú mismo!
git clone https://github.com/vuejs/vue.git node_modules/vuecd node_modules/vuenpm installnpm run buildBowerSolo las compilaciones UMD están disponibles en Bower.
# última versión estable$ bower install vueCargadores de Módulos AMDTodas las compilaciones UMD se pueden utilizar directamente como un módulo AMD.
Introducción →¿Encontró un error o simplemente quiere contribuir con la documentación? Edite esta página en GitHub! Puesto en marcha enNetlify